<template>
  <span 
    :class="badgeClasses"
    :style="badgeStyles"
    @click="handleClick"
  >
    <!-- 状态图标 -->
    <el-icon v-if="showIcon && iconComponent" class="status-icon">
      <component :is="iconComponent" />
    </el-icon>
    
    <!-- 状态文本 -->
    <span class="status-text">{{ displayText }}</span>
    
    <!-- 动画指示器 -->
    <span v-if="showPulse && isPulsing" class="pulse-indicator"></span>
    
    <!-- 进度指示器 -->
    <div v-if="showProgress && progress !== undefined" class="progress-indicator">
      <div class="progress-bar" :style="{ width: `${progress}%` }"></div>
    </div>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { 
  Check, 
  Close, 
  Clock, 
  Loading, 
  Warning, 
  Upload, 
  Download,
  RefreshRight,
  Document,
  Star,
  Flag,
  CircleCheck,
  CircleClose,
  Timer
} from '@element-plus/icons-vue'

// Props
interface Props {
  // 基本属性
  status: string
  type?: 'purchase-order' | 'approval' | 'priority' | 'order-type' | 'custom'
  
  // 显示配置
  text?: string
  showIcon?: boolean
  showPulse?: boolean
  showProgress?: boolean
  progress?: number
  
  // 样式配置
  size?: 'large' | 'default' | 'small'
  effect?: 'dark' | 'light' | 'plain'
  round?: boolean
  
  // 交互配置
  clickable?: boolean
  disabled?: boolean
  
  // 自定义样式
  color?: string
  backgroundColor?: string
  borderColor?: string
  
  // 动效配置
  animated?: boolean
  blinking?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  type: 'custom',
  showIcon: true,
  showPulse: false,
  showProgress: false,
  size: 'default',
  effect: 'light',
  round: false,
  clickable: false,
  disabled: false,
  animated: false,
  blinking: false
})

// Emits
const emit = defineEmits<{
  'click': [status: string]
}>()

// 计算属性
const displayText = computed(() => {
  if (props.text) return props.text
  
  // 根据类型和状态自动生成文本
  switch (props.type) {
    case 'purchase-order':
      return getPurchaseOrderStatusText(props.status)
    case 'approval':
      return getApprovalStatusText(props.status)
    case 'priority':
      return getPriorityText(props.status)
    case 'order-type':
      return getOrderTypeText(props.status)
    default:
      return props.status
  }
})

const statusConfig = computed(() => {
  switch (props.type) {
    case 'purchase-order':
      return getPurchaseOrderConfig(props.status)
    case 'approval':
      return getApprovalConfig(props.status)
    case 'priority':
      return getPriorityConfig(props.status)
    case 'order-type':
      return getOrderTypeConfig(props.status)
    default:
      return {
        color: props.color || '#909399',
        backgroundColor: props.backgroundColor || '#f4f4f5',
        borderColor: props.borderColor || '#e9e9eb',
        icon: null
      }
  }
})

const iconComponent = computed(() => {
  if (!props.showIcon) return null
  return statusConfig.value.icon
})

const isPulsing = computed(() => {
  const pulsableStatuses = ['审批中', '处理中', 'processing', 'pending']
  return pulsableStatuses.includes(props.status.toLowerCase()) || 
         ['待审批', '审批中'].includes(props.status)
})

const badgeClasses = computed(() => {
  return [
    'status-badge',
    `status-badge--${props.size}`,
    `status-badge--${props.effect}`,
    {
      'status-badge--round': props.round,
      'status-badge--clickable': props.clickable && !props.disabled,
      'status-badge--disabled': props.disabled,
      'status-badge--animated': props.animated,
      'status-badge--blinking': props.blinking,
      'status-badge--with-progress': props.showProgress
    }
  ]
})

const badgeStyles = computed(() => {
  const config = statusConfig.value
  const styles: Record<string, string> = {}
  
  if (props.effect === 'dark') {
    styles.backgroundColor = config.color
    styles.color = 'white'
    styles.borderColor = config.color
  } else if (props.effect === 'light') {
    styles.backgroundColor = config.backgroundColor
    styles.color = config.color
    styles.borderColor = config.borderColor
  } else { // plain
    styles.backgroundColor = 'transparent'
    styles.color = config.color
    styles.borderColor = config.borderColor
  }
  
  // 自定义样式覆盖
  if (props.color) styles.color = props.color
  if (props.backgroundColor) styles.backgroundColor = props.backgroundColor
  if (props.borderColor) styles.borderColor = props.borderColor
  
  return styles
})

// 方法
const handleClick = () => {
  if (props.clickable && !props.disabled) {
    emit('click', props.status)
  }
}

// 状态配置函数
const getPurchaseOrderStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    '草稿': '草稿',
    '待审批': '待审批',
    '审批中': '审批中',
    '已审批': '已审批',
    '已拒绝': '已拒绝',
    '已撤回': '已撤回',
    '执行中': '执行中',
    '已完成': '已完成',
    '已取消': '已取消'
  }
  return textMap[status] || status
}

const getPurchaseOrderConfig = (status: string) => {
  const configMap: Record<string, any> = {
    '草稿': {
      color: '#909399',
      backgroundColor: '#f4f4f5',
      borderColor: '#e9e9eb',
      icon: Document
    },
    '待审批': {
      color: '#e6a23c',
      backgroundColor: '#fdf6ec',
      borderColor: '#faecd8',
      icon: Clock
    },
    '审批中': {
      color: '#409eff',
      backgroundColor: '#ecf5ff',
      borderColor: '#d9ecff',
      icon: Loading
    },
    '已审批': {
      color: '#67c23a',
      backgroundColor: '#f0f9ff',
      borderColor: '#c2e7b0',
      icon: CircleCheck
    },
    '已拒绝': {
      color: '#f56c6c',
      backgroundColor: '#fef0f0',
      borderColor: '#fbc4c4',
      icon: CircleClose
    },
    '已撤回': {
      color: '#e6a23c',
      backgroundColor: '#fdf6ec',
      borderColor: '#faecd8',
      icon: RefreshRight
    },
    '执行中': {
      color: '#409eff',
      backgroundColor: '#ecf5ff',
      borderColor: '#d9ecff',
      icon: Timer
    },
    '已完成': {
      color: '#67c23a',
      backgroundColor: '#f0f9ff',
      borderColor: '#c2e7b0',
      icon: Check
    },
    '已取消': {
      color: '#909399',
      backgroundColor: '#f4f4f5',
      borderColor: '#e9e9eb',
      icon: Close
    }
  }
  return configMap[status] || configMap['草稿']
}

const getApprovalStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    '通过': '同意',
    '驳回': '拒绝',
    'withdraw': '撤回',
    'submit': '提交',
    'pending': '待处理',
    'processing': '处理中'
  }
  return textMap[status] || status
}

const getApprovalConfig = (status: string) => {
  const configMap: Record<string, any> = {
    '通过': {
      color: '#67c23a',
      backgroundColor: '#f0f9ff',
      borderColor: '#c2e7b0',
      icon: Check
    },
    '驳回': {
      color: '#f56c6c',
      backgroundColor: '#fef0f0',
      borderColor: '#fbc4c4',
      icon: Close
    },
    'withdraw': {
      color: '#e6a23c',
      backgroundColor: '#fdf6ec',
      borderColor: '#faecd8',
      icon: RefreshRight
    },
    'submit': {
      color: '#409eff',
      backgroundColor: '#ecf5ff',
      borderColor: '#d9ecff',
      icon: Upload
    },
    'pending': {
      color: '#e6a23c',
      backgroundColor: '#fdf6ec',
      borderColor: '#faecd8',
      icon: Clock
    },
    'processing': {
      color: '#409eff',
      backgroundColor: '#ecf5ff',
      borderColor: '#d9ecff',
      icon: Loading
    }
  }
  return configMap[status] || configMap['pending']
}

const getPriorityText = (status: string) => {
  const textMap: Record<string, string> = {
    '低': '低',
    '中': '中',
    '高': '高',
    '紧急': '紧急',
    'low': '低',
    'medium': '中',
    'high': '高',
    'urgent': '紧急'
  }
  return textMap[status] || status
}

const getPriorityConfig = (status: string) => {
  const configMap: Record<string, any> = {
    '低': {
      color: '#909399',
      backgroundColor: '#f4f4f5',
      borderColor: '#e9e9eb',
      icon: null
    },
    '中': {
      color: '#409eff',
      backgroundColor: '#ecf5ff',
      borderColor: '#d9ecff',
      icon: null
    },
    '高': {
      color: '#e6a23c',
      backgroundColor: '#fdf6ec',
      borderColor: '#faecd8',
      icon: Warning
    },
    '紧急': {
      color: '#f56c6c',
      backgroundColor: '#fef0f0',
      borderColor: '#fbc4c4',
      icon: Flag
    }
  }
  return configMap[status] || configMap['中']
}

const getOrderTypeText = (status: string) => {
  return status
}

const getOrderTypeConfig = (status: string) => {
  const configMap: Record<string, any> = {
    '标准采购': {
      color: '#409eff',
      backgroundColor: '#ecf5ff',
      borderColor: '#d9ecff',
      icon: Document
    },
    '紧急采购': {
      color: '#f56c6c',
      backgroundColor: '#fef0f0',
      borderColor: '#fbc4c4',
      icon: Flag
    },
    '框架采购': {
      color: '#67c23a',
      backgroundColor: '#f0f9ff',
      borderColor: '#c2e7b0',
      icon: Star
    },
    '补充采购': {
      color: '#e6a23c',
      backgroundColor: '#fdf6ec',
      borderColor: '#faecd8',
      icon: Warning
    }
  }
  return configMap[status] || {
    color: '#909399',
    backgroundColor: '#f4f4f5',
    borderColor: '#e9e9eb',
    icon: Document
  }
}
</script>

<style scoped>
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

/* 尺寸变体 */
.status-badge--small {
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  gap: 0.125rem;
}

.status-badge--large {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  gap: 0.375rem;
}

/* 圆角变体 */
.status-badge--round {
  border-radius: 50px;
}

/* 交互状态 */
.status-badge--clickable {
  cursor: pointer;
  user-select: none;
}

.status-badge--clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.status-badge--clickable:active {
  transform: translateY(0);
}

.status-badge--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 动画效果 */
.status-badge--animated {
  animation: statusPulse 2s ease-in-out infinite;
}

.status-badge--blinking {
  animation: statusBlink 1s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes statusBlink {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0.5;
  }
}

/* 图标样式 */
.status-icon {
  font-size: 1em;
  flex-shrink: 0;
}

.status-text {
  flex-shrink: 0;
}

/* 脉冲指示器 */
.pulse-indicator {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

/* 进度指示器 */
.status-badge--with-progress {
  padding-bottom: 0.375rem;
}

.progress-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
}

.progress-bar {
  height: 100%;
  background: currentColor;
  transition: width 0.3s ease;
}

/* 特殊效果 */
.status-badge--dark .pulse-indicator {
  background: rgba(255, 255, 255, 0.8);
}

.status-badge--light .pulse-indicator,
.status-badge--plain .pulse-indicator {
  background: currentColor;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .status-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
  
  .status-badge--small {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
  }
  
  .status-badge--large {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
  }
}

/* 无障碍支持 */
.status-badge:focus {
  outline: 2px solid #409eff;
  outline-offset: 2px;
}

.status-badge[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .status-badge {
    border-width: 2px;
    font-weight: 600;
  }
}

/* 动效偏好设置 */
@media (prefers-reduced-motion: reduce) {
  .status-badge,
  .status-badge *,
  .status-badge::before,
  .status-badge::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
</style> 